<!-- 
  添加点赞与取消点赞：产品详情
 -->
<template>
<div class="collect" @click.stop="handleLike" >
    <input type="text" v-model="haNum" style="display:none">
    <span class="btn" :class="isLike==1?'btn-a':''"></span>
    <span class="txt">{{isLike==1?$t('liked'):$t('like-product')}}</span>
</div>
</template>

<script>
import {
    likeProduct,
    cancelLikeProduct
} from "@/api/like"
export default {
    computed: {
        id() {
            return this.$route.params.pid || ''
        },
        detail() {
            return this.$store.state.seo.pageContent
        },
    },
    data() {
        return {
            haNum:0,
            isLike:0
        }
    },
    mounted(){
        this.isLike=this.detail?this.detail.isLike:0
    },
    methods: {
        handleLike() {
            if (!this.userInfo) {
                this.$modal.confirm(this.$t("tip-login"),this.locale).then(() =>{
                    this.go2Login()
                })
                return;
            }
            // 未收藏进行收藏
            if (this.isLike != 1) {
                this.isLike=1
                this.handleLikeAdd()
            } else {
                this.handleLikeCancel()
                this.isLike=0
            }
            this.haNum++
        },
        // 收藏 - 产品
        handleLikeAdd() {
            this.invoke(likeProduct,this.id).then(res => {
                if (res&&res.code==200) {
                    this.$message.success(this.$t("like-success"))
                }
            });
        },
        // 收藏 - 产品 - 取消
        handleLikeCancel() {
            this.invoke(cancelLikeProduct, this.id).then(res => {
                if (res&&res.code==200) {
                    this.$message.info(this.$t("like-cancel"))
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped src="@/assets/styles/likeCollect.scss"></style>
<style lang="scss" scoped>
.collect {
    :deep(.btn) {
        background-image: url('@/assets/images/icon_like.png')!important;

        &-a {
            background-image: url('@/assets/images/icon_like-a.png')!important;
        }
    }
}
</style>
